<template>
  <div>
    <!-- <GongShuiScanLeftVue/>
    <GongShuiScanRightVue/> -->

    <div class="GongShuiScan-main-con">
      <div class="gszl-left-con">
        <div class="gszl-left-guanxian">
          <div class="guanxian-title-bg">
            <span>管线</span>
          </div>
          <div class="guanxian-chart">
            <div class="guanxian-chart-left">
              <div class="guanxian-chart-text">管网总数量（根）</div>
              <div class="guanxian-chart-value">{{ GuanXiData.total }}</div>
            </div>
            <div class="guanxian-chart-right">
              <div class="guanxian-chart-text">管网总里程（公里）</div>
              <div class="guanxian-chart-value">{{ GuanXiData.mileage }}</div>
            </div>
          </div>
          <div class="gongshuishuju-title-bg">
            <span>供水数据</span>
          </div>
          <div class="yearGongshuiliang">
            <div class="yearText">年供水量</div>
            <div class="yearValue">
              <span>{{GongShuiData.thisYear}}</span>
              <span>m³</span>
            </div>
          </div>
          <div class="monthGongshuiliang">
            <div class="yearText">月供水量</div>
            <div class="yearValue">
              <span>{{GongShuiData.thisMonth}}</span>
              <span>m³</span>
            </div>
          </div>
          <div class="dayGongshuiliang">
            <div class="day-left-bg">
              <span>前天</span>
            </div>
            <div class="day-right">
              <div class="day-gsl">
                <div class="day-gslcontent">
                  <span>供水量</span>
                  <div class="day-valueText">
                    <span>{{GongShuiBefore.supply}}</span>
                    <span>万m³</span>
                  </div>
                </div>
                <!-- <div class="change-con">
                  <div class="value-bg"></div>
                  <span>12%</span>
                </div> -->
              </div>
              <div class="day-qsl">
                <div class="day-gslcontent">
                  <span>取水量</span>
                  <div class="day-valueText">
                    <span>{{GongShuiBefore.flow}}</span>
                    <span>万m³</span>
                  </div>
                </div>
                
                <!-- <div class="change-con">
                  <div class="value-bg"></div>
                  <span>12%</span>
                </div> -->
              </div>
            </div>
          </div>
          <div class="dayGongshuiliang">
            <div class="day-left-bg">
              <span>昨天</span>
            </div>
            <div class="day-right">
              <div class="day-gsl">
                <div class="day-gslcontent">
                  <span>供水量</span>
                  <div class="day-valueText">
                    <span>{{ GongShuiyesterday.supply }}</span>
                    <span>m³</span>
                  </div>
                </div>
                
                <!-- <div class="change-con">
                  <div class="value-bg"></div>
                  <span>12%</span>
                </div> -->
              </div>
              <div class="day-qsl">
                <div class="day-gslcontent">
                  <span>取水量</span>
                  <div class="day-valueText">
                    <span>{{GongShuiyesterday.flow}}</span>
                    <span>m³</span>
                  </div>
                </div>
                <!-- <div class="change-con">
                  <div class="value-bg"></div>
                  <span>12%</span>
                </div> -->
              </div>
            </div>
          </div>
        </div>
        <div class="gszl-left-lousunlv">
          <div class="gongshuishuju-title-bg">
            <span>管网漏损率排名</span>
          </div>
          <chart-view class="lousunlv-chart-content" :chart-option="LouSunLvChartOpt" :auto-resize="true"
            :play-highlight="false" height="100%" />
        </div>
      </div>

    </div>

  </div>
</template>
  
<script>
import { getGuanXian, getGongShui, getGuanWangLouSuo } from "@/api/apiPOI";



export default {
  name: "GongShuiScan",
  components: {


  },
  created() {
    this.LouSunLvChartOpt = this.$eChartFn.LouSunLvSort();
    this.Getguanxian();
    this.Getgongshui();
    this.Getguanwanglousuo();
  },
  data() {
    return {
      LouSunLvChartOpt: {},
      valueMultiple: [],
      GuanXiData: {},
      GongShuiData: {},
      GongShuiBefore:[],
      GongShuiyesterday:[],
      GuanWangLouSuoData: [],
      LeiJiGongShuiData: []
    };
  },

  methods: {
    Getguanxian() {
      getGuanXian().then((res => {
        this.GuanXiData = res.data;
      }))
    },
    Getgongshui() {
      getGongShui().then((res => {
        this.GongShuiData = res.data;
        this.GongShuiBefore = res.data.beforeYesterday;
        this.GongShuiyesterday = res.data.yesterday;
      }))
    },
    Getguanwanglousuo() {
      getGuanWangLouSuo().then((res) => {
        this.GuanWangLouSuoData = res.data;
        this.LouSunLvChartOpt = this.$eChartFn.LouSunLvSort(this.GuanWangLouSuoData);
      })
    },

  },
};
</script>
  
<style lang="scss" scoped>
.GongShuiScan-main-con {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  // width: 800px;
  // height: 900px;

  color: #fff;
}

.gszl-left-con {
  width: 300px;
  height: auto;
  
}

.gszl-left-guanxian {
  width: 300px;
  background-color: rgba($color: #02203d, $alpha: 0.8);

}

.gszl-left-lousunlv {
  width: 300px;
  height: calc(100vh - 660px);
  background-color: rgba($color: #02203d, $alpha: 0.8);

  .lousunlv-chart-content {
    width: 100%;
    height: calc(100% - 44px);
    background-color: rgba(32, 199, 35, 0);
  }
}

.guanxian-title-bg {
  width: 266px;
  height: 44px;
  background-image: url("@/assets/gszl/guanxian_title.png");
  position: relative;
  left: 10px;

  span {
    font-family: SourceHanSansCN-Medium;
    font-size: 14px;
    font-weight: normal;
    font-style: italic;
    font-stretch: normal;
    line-height: 16px;
    letter-spacing: 0px;
    color: #ffffff;
    background-image: linear-gradient(to bottom, #fff 30%, #00baff);
    /*  背景线性渐变 */
    background-clip: text;
    -webkit-background-clip: text;
    /* 背景被裁减为文字的前景色 */
    -webkit-text-fill-color: transparent;
    /* 文字填充为透明，优先级比color高。  */
    position: relative;
    top: 10px;
    left: 34px;
  }
}

.guanxian-chart {
  width: 273px;
  height: 73px;
  background-image: url("@/assets/gszl/guanxian_chart.png"); //guanxian_chart.png
  position: relative;
  // top: 10px;
  left: 8px;
  display: flex;
  justify-content: space-between;

  .guanxian-chart-left {
    display: flex;
    flex-direction: column;
    text-align: right;
    background-color: rgba(28, 218, 53, 0);
    position: relative;
    top: 4px;
    right: -26px;

    div:nth-child(1) {
      background-color: rgba(123, 178, 214, 0);
      position: relative;
      top: 0;
      right: 20px;
      font-family: SourceHanSansCN-Regular;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 21px;
      letter-spacing: 0px;
      color: #ffffff;
      width: 60px;
      text-align: center;

    }

    div:nth-child(2) {
      background-color: rgba(219, 190, 23, 0);
      position: relative;
      top: 0;
      right: 32px;
      font-family: SourceHanSansCN-Regular;
      font-size: 16px;
      font-weight: bold;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #edfbff;
      background-image: linear-gradient(to bottom, #fff 30%, #00baff);
      /*  背景线性渐变 */
      background-clip: text;
      -webkit-background-clip: text;
      /* 背景被裁减为文字的前景色 */
      -webkit-text-fill-color: transparent;
      /* 文字填充为透明，优先级比color高。  */
    }
  }

  .guanxian-chart-right {
    display: flex;
    flex-direction: column;
    text-align: left;
    background-color: rgba(28, 218, 53, 0);
    position: relative;
    top: 4px;
    left: -40px;

    div:nth-child(1) {
      background-color: rgba(123, 178, 214, 0);
      position: relative;
      top: 0;
      left: 38px;
      font-family: SourceHanSansCN-Regular;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 21px;
      letter-spacing: 0px;
      color: #ffffff;
      width: 60px;
      text-align: center;

    }

    div:nth-child(2) {
      background-color: rgba(219, 190, 23, 0);
      position: relative;
      top: 0;
      left: 38px;
      font-family: SourceHanSansCN-Regular;
      font-size: 16px;
      font-weight: bold;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #edfbff;
      background-image: linear-gradient(to bottom, #fff 30%, #00baff);
      /*  背景线性渐变 */
      background-clip: text;
      -webkit-background-clip: text;
      /* 背景被裁减为文字的前景色 */
      -webkit-text-fill-color: transparent;
      /* 文字填充为透明，优先级比color高。  */
    }
  }


}

.gongshuishuju-title-bg {
  width: 266px;
  height: 44px;
  background-image: url("@/assets/gszl/gongshuishuju-title.png");
  position: relative;
  left: 10px;

  span {
    font-family: SourceHanSansCN-Medium;
    font-size: 14px;
    font-weight: normal;
    font-style: italic;
    font-stretch: normal;
    line-height: 16px;
    letter-spacing: 0px;
    color: #ffffff;
    background-image: linear-gradient(to bottom, #fff 30%, #00baff);
    /*  背景线性渐变 */
    background-clip: text;
    -webkit-background-clip: text;
    /* 背景被裁减为文字的前景色 */
    -webkit-text-fill-color: transparent;
    /* 文字填充为透明，优先级比color高。  */
    position: relative;
    top: 10px;
    left: 34px;
  }
}

.yearGongshuiliang,
.monthGongshuiliang {
  width: 250px;
  height: 37px;
  background-image: url("@/assets/gszl/gngshuiliang-bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
  left: 10px;
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 14px;
  // padding: ;

  .yearText {
    font-family: SourceHanSansCN-Medium;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 28px;
    letter-spacing: 3px;
    color: #ffffff;
  }

  .yearValue {
    display: flex;
    flex-direction: row;


    span:nth-child(1) {
      font-family: SourceHanSansCN-Medium;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 28px;
      letter-spacing: 0px;
      color: #98dbfb;
      background-image: linear-gradient(to bottom, #fff 30%, #00baff);
      /*  背景线性渐变 */
      background-clip: text;
      -webkit-background-clip: text;
      /* 背景被裁减为文字的前景色 */
      -webkit-text-fill-color: transparent;
      /* 文字填充为透明，优先级比color高。  */
    }

    span:nth-child(2) {
      font-family: SourceHanSansCN-Medium;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 28px;
      letter-spacing: 0px;
      color: #a7d7ff;
      position: relative;
      top: 4px;
    }
  }


}

.dayGongshuiliang {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 10px 10px;

  background-color: rgba(20, 20, 223, 0);

  .day-left-bg {
    width: 50px;
    height: 50px;
    background-image: url("@/assets/gszl/day-bg.png");
    background-repeat: no-repeat;
    background-color: rgba(223, 159, 41, 0);
    position: relative;
    top: 26px;
    display: flex;
    justify-content: center;

    span {
      font-family: SourceHanSansCN-Regular;
      font-size: 16px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #ffffff;
      position: relative;
      top: 12px;
    }
  }

  .day-right {

    .day-gsl,
    .day-qsl {
      width: 230px;
      height: 51px;
      background-image: url("@/assets/gszl/day-gsl.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: flex-end;

      .day-gslcontent {
        width: 72%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-right: 10px;


          span:nth-child(1) {
            font-family: MicrosoftYaHei;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 51px;
            letter-spacing: 0px;
            color: #ffffff;
          }

          .day-valueText {
            span:nth-child(1) {
              font-family: SourceHanSansCN-Bold;
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 51px;
              letter-spacing: 0px;
              color: #00e4ff;
            }

            span:nth-child(2) {
              font-family: SourceHanSansCN-Regular;
              font-size: 12px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 51px;
              letter-spacing: 0px;
              color: #a7d7ff;
            }
          }

          .change-con {
            display: flex;
            flex-direction: row;

            .value-bg {
              width: 14px;
              height: 10px;
              background-image: url("@/assets/gszl/zengzhang.png");
              position: relative;
              top: 20px;
            }

            span {
              font-family: SourceHanSansCN-Regular;
              font-size: 12px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 51px;
              letter-spacing: 0px;
              color: #d72f2a;
            }
          }
      }

     
    }

    // .day-qsl {
    //   width: 214px;
    //   height: 51px;
    //   background-image: url("@/assets/gszl/day-gsl-bottom.png");
    //   background-repeat: no-repeat;
    //   background-size: 100% 100%;
    // }
  }
}

.gszl-right-con {
  width: 400px;
  height: 947px;
  // background-color: rgba(123,145,156,0.6);
  background-color: rgba($color: #02203d, $alpha: 0.8);

  .leijigongshui-title-bg {
    width: 339px;
    height: 44px;
    background-image: url("@/assets/gszl/gongshuishuju-title.png");
    position: relative;
    left: 10px;

    span {
      font-family: SourceHanSansCN-Medium;
      font-size: 14px;
      font-weight: normal;
      font-style: italic;
      font-stretch: normal;
      line-height: 16px;
      letter-spacing: 0px;
      color: #ffffff;
      background-image: linear-gradient(to bottom, #fff 30%, #00baff);
      /*  背景线性渐变 */
      background-clip: text;
      -webkit-background-clip: text;
      /* 背景被裁减为文字的前景色 */
      -webkit-text-fill-color: transparent;
      /* 文字填充为透明，优先级比color高。  */
      position: relative;
      top: 10px;
      left: 54px;
    }
  }

  .leijigongshui-chart-content {
    width: 100%;
    height: calc(100% - 44px);
    background-color: red;
  }
}
</style>